<template>
  <div class="screen">
    <el-row :gutter="10">
      <el-col :span="8">
        <div class="line-wrap">
          <div class="chart-title">日负荷折线图</div>
          <div class="broken-line"><BrokenLine /></div>
          <div class="data-wrap">
            <div class="today">
              <div class="name">今日</div>
              <div class="val">6228.4kW</div>
            </div>
            <div class="yester-day">
              <div class="name">昨日</div>
              <div class="val">6228.4kW</div>
            </div>
          </div>
        </div>
        <div class="time-electric">
          <div class="chart-title">分时电量</div>
          <div class="chart-warp">
            <ElectricChart />
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="loc-wrap">
          <div class="title"><span>河南大学（龙子湖校区）</span></div>
          <img src="./images/loca.png" alt="" />
        </div>
        <div class="pic-chart">
          <div class="chart-title">年月日负荷率</div>
          <PicChart /></div
      ></el-col>
      <el-col :span="8">
        <div class="histogram">
          <div class="chart-title">日电量柱状图</div>
          <div class="broken-line"><BarGraph /></div>
          <div class="data-wrap">
            <div class="today">
              <div class="name">今日</div>
              <div class="val">6228.4kWh</div>
            </div>
            <div class="yester-day">
              <div class="name">昨日</div>
              <div class="val">6228.4kWh</div>
            </div>
            <div class="yester-day">
              <div class="name">统计</div>
              <div class="val">6228.4kWh</div>
            </div>
          </div>
        </div>

        <div class="power-factor">
          <div class="chart-title">功率因数</div>
          <div class="data-wrap">
            <div class="a">
              <div>A相</div>
              <div class="col-wrap"><div></div></div>
              <div class="num">1.0</div>
            </div>
            <div class="b">
              <div>B相</div>
              <div class="col-wrap"><div></div></div>
              <div class="num">0.7</div>
            </div>
            <div class="c">
              <div>C相</div>
              <div class="col-wrap"><div></div></div>
              <div class="num">1</div>
            </div>
            <div class="d">
              <div>D相</div>
              <div class="col-wrap"><div></div></div>
              <div class="num">1</div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";
import BrokenLine from "./component/BrokenLine.vue";
import BarGraph from "./component/BarGraph.vue";
import ElectricChart from "./component/ElectricChart.vue";
import PicChart from "./component/PicChart.vue";
</script>
<style lang="scss">
.screen {
  width: 100%;
  height: 100%;
  padding: 1vh 18px 10px 12px;
  background-color: #000000;
  .line-wrap,
  .loc-wrap,
  .histogram {
    display: flow-root;
    background: url("./images/chart-warp.png") no-repeat;
    width: 100%;
    /* height: calc(100vh - 520px); */
    height: 45vh;
    background-size: 100% 100%;
  }
  .line-wrap {
    padding-top: 12px;
    position: relative;
    .chart-title {
      text-align: center;
      line-height: 39px;
      width: 146px;
      height: 39px;
      background: url("./images/title-wrap.png") no-repeat;
      background-size: 100% 100%;
      position: absolute;
      top: 1.5vh;
      left: 50%;
      transform: translateX(-50%);
      z-index: 9;
    }
    .broken-line {
      width: 100%;
      margin-bottom: 1vh;
    }
    .data-wrap {
      width: 540px;
      height: 13vh;
      transform: translateX(-50%);
      margin-left: 50%;
      border: 1px solid #001b5b;
      background: #091a37;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 96px;
      box-sizing: border-box;

      .yester-day,
      .today {
        .name {
          font-size: 20px;
          font-weight: 400;
          color: #309efe;
          text-align: center;
        }
        .val {
          text-align: center;
          font-size: 25px;
          font-weight: bold;
          color: #309efe;
          margin-top: 17px;
        }
      }
      .today {
      }
      .yester-day {
      }
    }
  }
  .histogram {
    padding-top: 12px;
    position: relative;
    .chart-title {
      text-align: center;
      line-height: 39px;
      width: 146px;
      height: 39px;
      background: url("./images/title-wrap.png") no-repeat;
      background-size: contain;
      position: absolute;
      top: 1.5vh;
      left: 50%;
      transform: translateX(-50%);
      z-index: 9;
    }
    .broken-line {
      width: 100%;
      margin-bottom: 10px;
    }
    .data-wrap {
      width: 540px;
      height: 13vh;
      transform: translateX(-50%);
      margin-left: 50%;
      border: 1px solid #001b5b;
      background: #091a37;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 30px;
      box-sizing: border-box;

      .yester-day,
      .today {
        .name {
          font-size: 20px;
          font-weight: 400;
          color: #309efe;
          text-align: center;
        }
        .val {
          text-align: center;
          font-size: 25px;
          font-weight: bold;
          color: #309efe;
          margin-top: 17px;
        }
      }
      .today {
      }
      .yester-day {
      }
    }
  }
  .loc-wrap {
    padding-left: 24px;

    .title {
      margin-top: 20px;
      background: url("./images/circle.png") 100% 100% no-repeat;
      width: 296px;
      height: 59px;
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
      padding-bottom: 15px;
      span {
        font-size: 20px;
        font-weight: 400;
        color: #ffffff;
      }
    }
    img {
      display: block;
      margin: 0 auto;
      width: 530px;
      height: 38.3vh;
    }
  }
  .time-electric,
  .pic-chart,
  .power-factor {
    margin-top: 1vh;
    background: url("./images/chart-warp.png") no-repeat;
    width: 100%;
    height: 39.3vh;
    background-size: 100% 100%;
  }
  .power-factor {
    padding-top: 12px;
    .chart-title {
      display: flex;
      justify-content: center;
      align-items: center;
      background: url(./images/title-wrap.png) no-repeat;
      background-size: 100% 100%;
      width: 146px;
      height: 39px;
      margin: 0 auto;
    }
    .data-wrap {
      display: flex;
      flex-direction: column;
      padding: 0 33px;
      justify-content: space-between;
      .a,
      .b,
      .c,
      .d {
        display: flex;
        align-items: center;
        padding: 0 22px;
        margin-top: 2.5vh;
        width: 488px;
        height: 5vh;
        background: #091a37;
        border: 1px solid #001b5b;
        justify-content: space-between;
        div {
          font-size: 18px;
          font-weight: 400;
          color: #ffffff;
        }
        .col-wrap {
          width: 349px;
          height: 6px;
          border-radius: 3px;
        }
      }
      .a .col-wrap div {
        background: #f1e800;
        width: 100%;
        height: 100%;
        border-radius: 3px;
      }
      .b .col-wrap div {
        background: #4be7ff;
        width: 70%;
        height: 100%;
        border-radius: 3px;
      }
      .c .col-wrap div {
        background: #ff3e33;
        width: 100%;
        height: 100%;
        border-radius: 3px;
      }
      .d .col-wrap div {
        background: #176ff9;
        width: 100%;
        height: 100%;
        border-radius: 3px;
      }
    }
  }
  .time-electric {
    padding-top: 12px;

    .chart-title {
      display: flex;
      justify-content: center;
      align-items: center;
      background: url(./images/title-wrap.png) no-repeat;
      background-size: 100% 100%;
      width: 146px;
      height: 39px;
      margin: 0 auto;
    }
  }
  .pic-chart {
    padding-top: 12px;

    .chart-title {
      display: flex;
      justify-content: center;
      align-items: center;
      background: url(./images/title-wrap.png) no-repeat;
      background-size: 100% 100%;
      width: 146px;
      height: 39px;
      margin: 0 auto;
    }
  }
  .chart-title {
    font-size: 20px;
    font-weight: 400;
    color: #3292ff;
    background-size: 100% 100%;
  }
}
</style>
